<template>
    <div class="user-center">
        <h2>用户中心</h2>
        <div class="profile-container">
            <!-- 头像上传区域 -->
            <div class="avatar-section">
                <img :src="BASE+account.userInfo.avatar || '/default-avatar.png'" class="avatar">
                <label v-if="editMode" class="avatar-upload">
                    <UploadBtn v-model="account.userInfo.avatar"/>
                </label>
            </div>
            
            <!-- 用户信息表单 -->
            <div class="info-section">
                <div v-if="!editMode" class="view-mode">
                    <div class="info-item"><span>权限：</span>{{ getRoleNameById(userInfo.flyrole) }}</div>
                    <div class="info-item"><span>用户名：</span>{{ userInfo.username }}</div>
                    <div class="info-item"><span>手机号：</span>{{ userInfo.phone }}</div>
                    <div class="info-item"><span>性别：</span>{{ userInfo.gender == 1 ? '男' : '女' }}</div>
                    <n-button type="primary" @click="editMode = true">编辑资料</n-button>
                </div>
                
                <n-form v-else ref="formRef" :model="userForm">
                    <n-form-item label="用户名" path="username">
                        <n-input v-model:value="userForm.username" />
                    </n-form-item>
                    <n-form-item label="手机号" path="phone">
                        <n-input v-model:value="userForm.phone" />
                    </n-form-item>
                    <n-form-item label="性别" path="gender">
                        <n-radio-group v-model:value="userForm.gender">
                            <n-radio :value=1>男</n-radio>
                            <n-radio :value=2>女</n-radio>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item label="权限" path="selectValue" >
                        <n-select
                        v-model:value="userForm.flyrole"
                        placeholder="请选择角色"
                        :options="rolelist"
                        label-field="roleName"
                        value-field="_id"
                        />
                    </n-form-item>
                    <div class="form-actions">
                        <n-button @click="cancelEdit">取消</n-button>
                        <n-button type="primary" @click="submitForm">保存</n-button>
                    </div>
                </n-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
    NForm,
    NFormItem,
    NInput,
    NButton,
    NRadio,
    NRadioGroup,
    NDatePicker,
    NSelect,
} from 'naive-ui'
import { useAccount } from '../../store/account'
import { BASE } from '../../config'
import { flyroleGetApi, flyroleUpdateApi, updateUserInfoApi, userUpdateApi } from '../../api/user'
import UploadBtn from '../../components/UploadBtn.vue'

const account = useAccount()
// 用户信息状态
const editMode = ref(false)
const tempAvatar = ref(null)
const formRef = ref(null)

// 角色数据
const rolelist = ref([]);
    flyroleGetApi().then(res=>{
    rolelist.value = res.data.data
})

// 用户数据
const userInfo = reactive({
    username: account.userInfo.username,
    phone: account.userInfo.phone,
    gender: account.userInfo.gender,
    flyrole: account.permitData._id,
})

// 表单数据
const userForm = reactive({ ...userInfo })

// 表单提交
const submitForm = async () => {
    try {
        await formRef.value.validate()
        console.log(account.userInfo);
        // 提交更新用户信息
        let res =  await updateUserInfoApi(
            account.jwttoken,
            account.userInfo._id,
            {
                username: userForm.username,
                phone: userForm.phone,
                gender: userForm.gender,
                flyroleId: userForm.flyrole,
            }
        )
        console.log('res',res);
        // 更新本地数据
        account.userUpdate({
                username: userForm.username,
                phone: userForm.phone,
                gender: userForm.gender,
                flyroleId: userForm.flyrole,
            })
        Object.assign(userInfo, userForm)
        editMode.value = false 
    } catch (errors) {
        console.log('验证失败', errors)
    }
}

// 取消编辑
const cancelEdit = () => {
    Object.assign(userForm, userInfo)
    editMode.value = false
    tempAvatar.value = null
}

// 渲染角色显示
const getRoleNameById = (id) => {
    const role = rolelist.value.find(item => item._id === id)
    return role ? role.roleName : '未知角色'
}
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.user-center {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;

    .profile-container {
        display: flex;
        gap: 40px;
        margin-top: 30px;

        .avatar-section {
            text-align: center;
            .avatar {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                margin-bottom: 15px;
            }
            .avatar-upload {
                cursor: pointer;
                color: #2080f0;
            }
        }

        .info-section {
            flex: 1;
            .view-mode {
                .info-item {
                    margin-bottom: 15px;
                    span {
                        color: #666;
                        margin-right: 10px;
                        width: 60px;      // 添加固定宽度
                        display: inline-block; // 使宽度生效
                    }
                }
            }
        }
    }

    .form-actions {
        margin-top: 20px;
        text-align: right;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }
}
</style>